<script setup lang="ts">
defineOptions({
  name: "deviceStatisticsTasksItem"
});
import { computed } from "vue";
import inspectionBg from "@/assets/images/electricity/task-icon-0.png";
import maintenanceBg from "@/assets/images/electricity/task-icon-1.png";
import maintenanceBg1 from "@/assets/images/electricity/task-icon-2.png";
import abnormalInspectionBg from "@/assets/images/electricity/task-icon-3.png";
import missingBg from "@/assets/images/electricity/task-icon-4.png";
import abnormalBg from "@/assets/images/electricity/task-icon-5.png";
import callInWorkOrderBg from "@/assets/images/electricity/task-icon-6.png";
import otherBg from "@/assets/images/electricity/task-icon-7.png";
import inspectionBg_d from "@/assets/images/electricity/task-icon-0-dark.png";
import maintenanceBg_d from "@/assets/images/electricity/task-icon-1-dark.png";
import maintenanceBg1_d from "@/assets/images/electricity/task-icon-2-dark.png";
import abnormalInspectionBg_d from "@/assets/images/electricity/task-icon-3-dark.png";
import missingBg_d from "@/assets/images/electricity/task-icon-4-dark.png";
import abnormalBg_d from "@/assets/images/electricity/task-icon-5-dark.png";
import callInWorkOrderBg_d from "@/assets/images/electricity/task-icon-6-dark.png";
import otherBg_d from "@/assets/images/electricity/task-icon-7-dark.png";
import { useRouter } from "vue-router";

const router = useRouter();

interface Props {
  data?: any;
  dark?: boolean;
}

const props = withDefaults(defineProps<Props>(), { dark: false });

const bgIconList = {
  inspectionBg,
  maintenanceBg,
  maintenanceBg1,
  abnormalInspectionBg,
  missingBg,
  abnormalBg,
  callInWorkOrderBg,
  otherBg
};
const bgDarkIconList = {
  inspectionBg: inspectionBg_d,
  maintenanceBg: maintenanceBg_d,
  maintenanceBg1: maintenanceBg1_d,
  abnormalInspectionBg: abnormalInspectionBg_d,
  missingBg: missingBg_d,
  abnormalBg: abnormalBg_d,
  callInWorkOrderBg: callInWorkOrderBg_d,
  otherBg: otherBg_d
};
const bgColorList = {
  inspectionBg: "#FFF5E5",
  maintenanceBg: "#EFF6FF",
  maintenanceBg1: "#E6FBF8",
  abnormalInspectionBg: "#FFEEEE",
  missingBg: "#F6F6F6",
  abnormalBg: "#FFEEEE",
  callInWorkOrderBg: "#EFF6FF",
  otherBg: "#E6FBF8"
};

const valueIsEmpty = value => {
  if (value === "" || value == null || typeof value == "undefined") {
    return true;
  }
  return false;
};

const toPageHandler = (flag?: boolean) => {
  if (props.dark) return;
  let { path = "", query_done = {}, query = {} } = props.data;
  if (!path) return;
  if (!flag) {
    query = { ...query, ...query_done };
  }

  router.push({ path, query });
};
const getImg = computed(() => (props.dark ? bgDarkIconList[props.data?.icon] : bgIconList[props.data?.icon]));
const getBgColor = computed(() => (props.dark ? "linear-gradient(to right, #0e263c, #133656)" : bgColorList[props.data?.icon]));
</script>

<template>
  <div class="tasks-item-content" :style="{ background: getBgColor }">
    <div class="content-box">
      <img class="content-icon" :src="getImg" alt="" srcset="" />
      <div class="content-box-label" :class="{ dark }">{{ data?.label }}</div>
      <div class="content-box-data" :class="{ dark }">
        <px-tooltip effect="dark" content="未完成">
          <div :class="['data-text', 'color-undo', data?.path ? 'data-hover' : '']" @click="toPageHandler(false)">
            {{ valueIsEmpty(data?.undoTasks) ? "--" : data?.undoTasks }}
          </div>
        </px-tooltip>
        <span :class="['color-total', data?.path ? 'data-hover' : '']">/</span>
        <px-tooltip effect="dark" content="合计任务数">
          <div :class="['data-text', 'color-total', data?.path ? 'data-hover' : '']" @click="toPageHandler(true)">
            {{ valueIsEmpty(data?.totalTasks) ? "--" : data?.totalTasks }}
          </div>
        </px-tooltip>
        <span class="text">项</span>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
$colorDone: #f45252;
$darkColorDone: #ff0844;
$colorTotal: #2885f7;
$darkColorTotal: #00c2ff;

.tasks-item-content {
  position: relative;
  display: flex;
  align-items: center;

  .dark {
    &.content-box-label {
      color: #fff !important;
    }

    .color-undo {
      color: $darkColorDone !important;
    }

    .color-total {
      color: $darkColorTotal !important;
    }
  }

  .color-undo {
    color: $colorDone;
  }

  .color-total {
    color: $colorTotal;
  }

  .content-icon {
    position: absolute;
    right: 8px;
    bottom: 8px;
    height: 40px;
  }

  .content-box {
    display: flex;
    flex-direction: column;
    width: 148px;
    height: 66px;
    padding: 8px;
    border-radius: 4px;

    .content-box-label {
      font-size: 14px;
      font-weight: 600;
      color: #555;
      white-space: nowrap;
    }

    .content-box-data {
      display: flex;
      align-items: center;
      font-size: 20px;
      font-weight: 600;
      color: #555;
      white-space: nowrap;

      .data-text {
        display: flex;
        align-items: center;
        justify-content: center;
        width: fit-content;
        min-width: 18px;
        height: 30px;
      }

      .data-hover:hover {
        // font-size: 24px;
        cursor: pointer;
        opacity: 0.8;
      }

      .text {
        padding-left: 3px;
        font-size: 14px;
        font-weight: normal;
        color: #363636;
      }
    }
  }
}
</style>
